<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 
    功能完成：
      1.全选和全不选
      2.商品名称、单价、数量、小计
    
    功能待完成：
      1.商品的添加
      2.删掉单个商品
      3.如果只有一个商品，全选后单独取消这个商品时会出现商品取消了但是全选框还被选中

 -->
 
    <div>
        <ul>
            <li><a href="javascript:void(0);" onclick="sjx()"><p>数据线</p></a></li>
            <li><a href="javascript:void(0);" onclick="cdb()"><p>充电宝</p></a></li>
            <li><a href="javascript:void(0);" onclick="ys()"><p>雨伞</p></a></li>
            <li><a href="javascript:void(0);" onclick="sj()"><p>手机</p></a></li>
        </ul>
    </div>

    <div>
        <h2>购物车</h2>
        <form action="/login" method="GET">
            <table id="bg">
                <tr>
                    <td><input type="checkbox" id="checkbox0" onclick="xz()">全选</td>
                    <td>商品名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        // 流程：
        //   1.点击商品
        //   2.商品添加到购物车
        //   3.购物车操作
        
        // 立即执行函数忘记了
        // 商品操作
        // var sjx_js = cdb_js = ys_js = sj_js = 1;
        // var ne = " ";
        // var pe = 0;
        // var qy = 0;
        // var sl = pe * qy;
        // function sjx(){
        //     ne = "数据线";
        //     pe = 12;
        //     qy = 1;
        //     sl = pe * qy;
        //     gwc(1);
        // }
        // function cdb(){
        //     ne = "充电宝";
        //     pe = 12;
        //     qy = 1;
        //     sl = pe * qy;
        //     gwc(2);
        // }
        // function ys(){
        //     ne = "雨伞";
        //     pe = 30;
        //     qy = 1;
        //     sl = pe * qy;
        //     gwc(3);
        // }
        // function sj(){
        //     ne = "手机";
        //     pe = 1200;
        //     qy = 1;
        //     sl = pe * qy;
        //     gwc(4);
        // }
        // // 添加商品到购物车
        // function gwc(a){
        //     var insertDic = document.getElementById("bg");
        //     if(a == 1){
        //         var zanshi = '<tr><td><input type="checkbox" id="checkbox1"></td><td id="name1"></td><td id="price1"></td><td><button type="button" onclick="qyjia1()">+</button><span id="quantity1"></span><button type="button" onclick="qyjian1()">-</button></td><td id="subtotal"></td><td id="qperation1"><a href="javascript:void(0);">x</a></td></tr>';
        //         sjx_js == 1 ? insertDic.innerHTML = insertDic.innerHTML + zanshi : sjx_js = 2;
        //         sjx_js++;
        //         tjsj(1);
        //     }else if(a == 2){
        //         var zanshi = '<tr><td><input type="checkbox" id="checkbox2"></td><td id="name2"></td><td id="price2"></td><td><button type="button" onclick="qyjia2()">+</button><span id="quantity2"></span><button type="button" onclick="qyjian2()">-</button></td><td id="subtotal"></td><td id="qperation2"><a href="javascript:void(0);">x</a></td></tr>';
        //         cdb_js == 1 ? insertDic.innerHTML = insertDic.innerHTML + zanshi : cdb_js = 2;
        //         cdb_js++;
        //         tjsj(2);
        //     }else if(a == 3){
        //         var zanshi = '<tr><td><input type="checkbox" id="checkbox3"></td><td id="name3"></td><td id="price3"></td><td><button type="button" onclick="qyjia3()">+</button><span id="quantity3"></span><button type="button" onclick="qyjian3()">-</button></td><td id="subtotal"></td><td id="qperation3"><a href="javascript:void(0);">x</a></td></tr>';
        //         ys_js == 1 ? insertDic.innerHTML = insertDic.innerHTML + zanshi : ys_js = 2;
        //         ys_js++;
        //         tjsj(3);
        //     }else if(a == 4){
        //         var zanshi = '<tr><td><input type="checkbox" id="checkbox4"></td><td id="name4"></td><td id="price4"></td><td><button type="button" onclick="qyjia4()">+</button><span id="quantity4"></span><button type="button" onclick="qyjian4()">-</button></td><td id="subtotal"></td><td id="qperation4"><a href="javascript:void(0);">x</a></td></tr>';
        //         sj_js == 1 ? insertDic.innerHTML = insertDic.innerHTML + zanshi : sj_js = 2;
        //         sj_js++;
        //         tjsj(4);
        //     }
        // }
        // // 用于添加商品到购物车的数据
        // function tjsj(b){
        //     if(b == 1){
        //         document.getElementById("name1").innerHTML = ne;
        //         document.getElementById("price1").innerHTML = pe;
        //         document.getElementById("quantity1").innerHTML = qy;
        //         document.getElementById("subtotal1").innerHTML = sl;
        //     }else if(b == 2){
        //         document.getElementById("name2").innerHTML = ne;
        //         document.getElementById("price2").innerHTML = pe;
        //         document.getElementById("quantity2").innerHTML = qy;
        //         document.getElementById("subtotal2").innerHTML = sl;
        //     }else if(b == 3){
        //         document.getElementById("name3").innerHTML = ne;
        //         document.getElementById("price3").innerHTML = pe;
        //         document.getElementById("quantity3").innerHTML = qy;
        //         document.getElementById("subtotal3").innerHTML = sl;
        //     }else if(b == 4){
        //         document.getElementById("name4").innerHTML = ne;
        //         document.getElementById("price4").innerHTML = pe;
        //         document.getElementById("quantity4").innerHTML = qy;
        //         document.getElementById("subtotal4").innerHTML = sl;
        //     }

        //     // 数量增加
        //     function qyjia1(){
        //         qy = sjx_js;
        //         document.getElementById("quantity1").innerHTML = qy;
        //         document.getElementById("subtotal1").innerHTML = sl;
        //     }
            

        // }


































        var ne = " ";
        var pe = 0;
        var qy = 0;
        var sl = qy*pe;
        var on = true;
        while (true) {
            var a = 0;
            
        }

        // 商品信息
        var js_sjx = 1;
        function sjx() {
            ne = "数据线";
            pe = 12;
            var insertDic = document.getElementById("bg");
            var zanshi = '<tr id="sjx"><td><input type="checkbox" id="checkbox1"></td><td id="name1"></td><td id="price1"></td><td><button type="button" onclick="qyjia1()">+</button><span id="quantity1"></span><button type="button" onclick="qyjian1()">-</button></td><td id="subtotal"></td><td id="qperation1"><a href="javascript:void(0);">x</a></td></tr>';
            if (js_sjx == 1) {
                js_sjx++;
                insertDic.innerHTML = insertDic.innerHTML + zanshi;
                document.getElementById("name1").innerHTML = ne;
                document.getElementById("price1").innerHTML = pe;
                document.getElementById("quantity1").innerHTML = qy;
                document.getElementById("subtotal1").innerHTML = sl;
            }
        }
        var js_cdb = 1;
        function cdb() {
            ne = "充电宝";
            pe = 100;
            var insertDic = document.getElementById("bg");
            var zanshi = '<tr id="cdb"><td><input type="checkbox" id="checkbox2"></td><td id="name2"></td><td id="price2"></td><td><button type="button" onclick="qyjia2()">+</button><span id="quantity2"></span><button type="button" onclick="qyjian2()">-</button></td><td id="subtotal"></td><td id="qperation2"><a href="javascript:void(0);">x</a></td></tr>';
            if (js_cdb == 1) {
                js_cdb++;
                insertDic.innerHTML = insertDic.innerHTML + zanshi;
                document.getElementById("name2").innerHTML = ne;
                document.getElementById("price2").innerHTML = pe;
                document.getElementById("quantity2").innerHTML = qy;
                document.getElementById("subtotal2").innerHTML = sl;
            }
        }
        var js_ys = 1;
        function ys() {
            ne = "雨伞";
            pe = 20;
            var insertDic = document.getElementById("bg");
            var zanshi = '<tr id="ys"><td><input type="checkbox" id="checkbox3"></td><td id="name3"></td><td id="price3"></td><td><button type="button" onclick="qyjia3()">+</button><span id="quantity3"></span><button type="button" onclick="qyjian3()">-</button></td><td id="subtotal"></td><td id="qperation3"><a href="javascript:void(0);">x</a></td></tr>';
            if (js_ys == 1) {
                js_ys++;
                insertDic.innerHTML = insertDic.innerHTML + zanshi;
                document.getElementById("name3").innerHTML = ne;
                document.getElementById("price3").innerHTML = pe;
                document.getElementById("quantity3").innerHTML = qy;
                document.getElementById("subtotal3").innerHTML = sl;
            }
        }
        var js_sj = 1;
        function sj() {
            ne = "手机";
            pe = 12;
            var insertDic = document.getElementById("bg");
            var zanshi = '<tr id="sj"><td><input type="checkbox" id="checkbox4"></td><td id="name4"></td><td id="price4"></td><td><button type="button" onclick="qyjia4()">+</button><span id="quantity4"></span><button type="button" onclick="qyjian4()">-</button></td><td id="subtotal"></td><td id="qperation4"><a href="javascript:void(0);">x</a></td></tr>';
            if (js_sj == 1) {
                js_sj++;
                insertDic.innerHTML = insertDic.innerHTML + zanshi;
                document.getElementById("name4").innerHTML = ne;
                document.getElementById("price4").innerHTML = pe;
                document.getElementById("quantity4").innerHTML = qy;
                document.getElementById("subtotal4").innerHTML = sl;
            }
        }

        function xz() {
            var isChecked = document.getElementById("checkbox0").checked;
            if(isChecked == true){
                document.getElementById("checkbox1").checked = true;
                document.getElementById("checkbox2").checked = true;
                document.getElementById("checkbox3").checked = true;
                document.getElementById("checkbox4").checked = true;
            }else if(isChecked == false){
                document.getElementById("checkbox1").checked = false;
                document.getElementById("checkbox2").checked = false;
                document.getElementById("checkbox3").checked = false;
                document.getElementById("checkbox4").checked = false;
            }
        }

      
    </script>
</body>
</html>